<template>
    <div class="payment-index">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item to="/cart">购物车</el-breadcrumb-item>
            <el-breadcrumb-item>支付</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card shadow="hover">
            <div class="div">
                <div class="left">
                    <el-col :sm="12" :lg="6">
                        <el-result icon="success" :sub-title="subTitle">
                        </el-result>
                    </el-col>
                </div>
                <div class="right">
                    <span>订单状态：已支付</span
                    ><span>订单编号：{{ orderInfo.order_id }}</span>
                    <span>支付金额：￥{{ orderInfo.total_price }}</span>
                    <span>支付时间：{{ orderInfo.update_time }}</span>
                </div>
            </div>
        </el-card>
        <el-button @click="$router.push('/')" color="#da9233"
            >返回首页</el-button
        >
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { findOrderInfoById } from '@/apis/order'

let subTitle = ref('支付成功！')
const route = useRoute()
let orderInfo = ref('')
onMounted(() => {
    findOrderInfoById(route.query.order_id).then(res => {
        orderInfo.value = res.at(-1)
    })
})
</script>

<style lang="scss" scoped>
.payment-index {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .el-breadcrumb {
        margin-bottom: 10px;
        margin-left: -1150px;
    }
    .el-card {
        width: 1240px;
        .div {
            width: 1240px;
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-evenly;
        }

        .left {
            width: 300px;
            margin-left: -500px;
        }
        .right {
            margin-left: -500px;
            display: flex;
            flex-direction: column;
            > span {
                margin-top: 3px;
                margin-bottom: 3px;
            }
        }
    }
    .el-button {
        width: 300px;
        margin-top: 30px;
    }
}
</style>
